<canvas id="{{ $id }}" style="width: 100%;height: 260px;"></canvas>
<script>
    $(function () {
        Chart.defaults.scale.gridLines.display = false;
        var url = "{{ $url }}";
        var id = "{{ $id }}";
        var type = "{{ $type }}";
        var label = "{{ $label }}";
        var labelField = "{{ $labelField }}";
        var dataField = "{{ $dataField }}";
        $.get(url, function (response) {
            console.log(response);
            var barChartData = {
                labels: response.map((item) => {return item[labelField]}),
                datasets: [{
                    label: label,
                    borderWidth: 1,
                    data: response.map((item) => {return item[dataField]})
                }]

            };

            var ctx = document.getElementById(id).getContext('2d');
            new Chart(ctx, {
                type: type,
                data: barChartData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Bar Chart'
                    },
                    scales: {
                        yAxes: [{ticks: {min: 0}}],
                        xAxes: [{ticks: {min: 0}}]
                    }
                }
            });
        }, "json");
    });
</script>